Работа с изображениями SVG

Элементы SVG можно изменять с помощью атрибутов, которые задают подробные сведения о том, каким образом элемент должен обрабатываться или визуализироваться на мнемосхеме.

Пример 1. Вставка изображений SVG на мнемосхему, задание координат и масштаба изображения

1. Задание: Разместить на мнемосхеме изображение eq.svg с координатами (100;100) в масштабе 50%

2. Создайте новую мнемосхему

3. Перейдите во вкладку Объекты и добавьте папку Ресурсы

4. Перейдите в папку Ресурсы и перетащите файл с расширением *.svg в область загрузки или, кликнув на неё, выберите файл в Проводнике

5. В примерах ниже используется файл eq.svg

6. Перейдите на вкладку Графика, в панели Контролы во вкладке Общие элементы кликните на иконке Изображение SVG

7. На мнемосхеме в левом верхнем углу мнемосхемы(координаты (0;0)) появится новый элемент

8. Кликните на элемент. Для выбора файла из ресурсов мнемосхемы в поле src необходимо указать путь к файлу: %resources%/eq.svg

9. Для изменения координат изображения, укажите 100 в поле left и 100 в поле top. Для масштаба 50% по горизонтали и вертикали укажите 0,5 в полях transform_scale_x и transform_scale_y.

10. Результат:

Пример 2. Изменение заливки элементов изображения SVG с помощью переменных мнемосхемы

1. Атрибут fill - это атрибут представления для форм и текста, который определяет цвет и используется для окраски элемента.

2. Файл примера eq.svg состоит из нескольких элементов, параметры которых можно изменять. Данные получены из программы Inkscape:

3. Перейдем во вкладку Параметры мнемосхемы и создадим переменные с такими же названиями как и у элементов изображения (rect1, rect2_2, rect2_8, ... part2_7), но используя нижнее подчеркивание вместо дефиса в названиях переменных

4. Заполним в панели свойств изображения в поле params функции установки цвета заливки fill каждого элемента в зависимости от значения соответствующей переменной: 0 - красный, 1 - синий, 2 - черный, 3 - белый, 4 - зеленый. Пример для rect1: rect1:fill={{list($rect1,0,"red",1,"blue",2,"black",3,"white",4,"green")}}

5. Теперь можно перейти в окно Отладка, где мы увидим перечень переменных (их начальные значения равны 0), и меняя вручную значения переменных, будем видеть изменения цвета заливки соответствующих элементов изображения svg на мнемосхеме

6. Создадим на мнемосхеме инструменты выбора пользователем нужного цвета элементов. Для примера используем контрол Раскрывающийся список в разделе Мобильные элементы

7. Для выбора цвета рамки в свойствах списка укажем следующие данные: имя в поле name - Цвет рамки, привяжем в поле value переменную $rect1 и составим список значений переменной для каждого цвета в поле list (переход на новую строку в списке выполняется сочетанием клавиш Shift+Enter).

8. Аналогично создадим раскрывающиеся списки для выбора цвета остальных элементов изображения (rect2-2, rect2-8, ... part2-7). Теперь пользователь может выбирать цвет каждого элемента изображения svg на экране, привязанном к данной мнемосхеме:

Пример 3. Изменение цвета и толщины линий элементов изображения SVG

1. Используем такие параметры элементов изображения svg, как stroke - цвет окантовки элемнта и stroke-width - толщина окантовки элемента.

2. В поле params изображения svg укажем список параметров для отдельных элементов. Например, для задания синего цвета окантовки элемента rect2 укажем в следующем виде: rect1:stroke=blue, а для увеличения толщины окантовки элемента rect1 в 1,5 раза укажем следующее: rect1:stroke-width=1.5.

3. Результат:

Пример 4. Изменение радиуса круглых элементов и радиуса скругления прямоугольных элементов изображения SVG с помощью переменных мнемосхемы

1. Используем такие параметры элементов изображения svg, как r - радиус круглых элементов, rx и ry - радиусы скруглений по горизонтали и вертикали углов прямоугольных элементов.

2. Перейдем во вкладку Параметры мнемосхемы и создадим переменные radius и radius_handle

3. Заполним в панели свойств изображения в поле params список параметров размера радиуса r круглых элементов (path2, path2_4, path2_7) в зависимости от значения соответствующей переменной radius: Пример для part2: path2:r=$radius.

4. Выражения для радиусов скругления углов прямоугольных элементов (rect2, rect2-2, rect2-8) составим используя переменную radius_handle. Пример для rect2: rect2:rx=$radius_handle и rect2:ry=$radius_handle.

5. Создадим инструменты выбора радиусов для пользователя. Для примера используем контрол Ползунок в разделе Общие элементы

6. Для выбора размера радиуса круглых элементов в свойствах контрола укажем следующие данные: имя в поле name - Радиус ручки, привяжем в поле value переменную $radius, укажем минимальное и максимальное значения в полях min_value и max_value, а также шаг изменения переменной в поле step.

7. Для выбора размера радиуса скругления приямоугольных элементов в свойствах аналогичного контрола укажем следующие данные: имя в поле name - Скругление линий, привяжем в поле value переменную $radius_handle, укажем минимальное и максимальное значения в полях min_value и max_value, а также шаг изменения переменной в поле step.

8. Теперь пользователь может выбирать радиусы на экране, привязанном к данной мнемосхеме.

Примеры на WebSCADA.ru

1. Данные выводятся на Экран1, созданный на основе Мнемосхемы1.